import React from 'react';
import {
    Spin,
    Card,
    Radio,
    Pagination,
    Icon
} from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
import QueueAnim from 'rc-queue-anim';
import DispatcherConstructor from '../../../../common/Dispatcher.js';
import '../App.less';

import Config from '../Config.js';
var Dispatcher = new DispatcherConstructor();
Dispatcher.initPublisher(Config);

const LiveList = React.createClass({
    componentDidMount: function(){
        var {
            currentKey
        } = this.props;
        Dispatcher.pub("changeKey", {
            key: currentKey
        });
    },
    handleRadioChange: function(e){
        var {
            loading,
            currentKey,
            platforms
        } = this.props;
        switch (currentKey) {
            case '0':
                Dispatcher.pub("getDouyu", {
                    game: e.target.value
                });
                break;
            case '1':
                Dispatcher.pub("getXiongmao", {
                    game: e.target.value
                });
                break;
            case '2':
                Dispatcher.pub("getZhanqi",{
                    game: e.target.value
                });
                break;
            default:
        }
    },
    renderRadioGroup: function(){
        var {
            currentKey
        } = this.props;
        const sorts = [
            { text: '全部', value: 'all' },
            { text: '英雄联盟', value: 'lol' },
            { text: '炉石传说', value: 'how' },
            { text: '守望先锋', value: 'overwatch' },
        ];
        if(currentKey == "0"){
        }else{
            sorts.splice(0,1);
        }
        return (
            <div className="live-sort">
                <RadioGroup value={this.props.currentGame} onChange={this.handleRadioChange}>
                    {
                        sorts.map((sort) =>
                            <RadioButton value={sort.value}>{sort.text}</RadioButton>
                        )
                    }
                </RadioGroup>
            </div>
        );
    },
    onChangePage: function(currentPage){
        Dispatcher.pub("changePage", {
            currentPage: currentPage
        });
    },
    render: function(){
        var lives = this.props.lives;
		//6个直播间分页
		var currentPage = this.props.currentPage;
		var currentLives = lives.slice((currentPage-1)*6, currentPage*6);
        if(this.props.loading){
            return (
                <div>
                    {
                        this.renderRadioGroup()
                    }
                    <div className="live-loading">
    					<Spin />
    				</div>
                </div>
            );
        }else{
            return (
                <div>
                    {
                        this.renderRadioGroup()
                    }
                    {
                        currentLives.map((live, i) =>
                            <QueueAnim type={[ 'right', 'left']}>
                                <div key={i} className="live-card">
                                    <Card style={{ width: 240 }} bodyStyle={{ padding: 0 }} onClick={() => Dispatcher.pub("viewLive",{index: i})}>
                                        <div className="custom-image">
                                            <img width="100%" src={live.room_src} onError={() => Dispatcher.pub("imgError",{index: i})} />
                                        </div>
                                        <div className="custom-card">
                                            <h3>{live.room_name.slice(0, 14)}</h3>
                                            <p>
                                                <span><Icon type="user" /> {live.nickname}</span>
                                                <span style={{ float: 'right' }}><Icon type="eye-o" /> {live.online}</span>
                                            </p>
                                        </div>
                                    </Card>
                                </div>
                            </QueueAnim>
                        )
                    }
                    <div className="live-pagination">
                        <Pagination defaultCurrent={1} defaultPageSize={6} onChange={this.onChangePage} total={lives.length > 30 ? 30 : lives.length}/>
                    </div>
                </div>
            )
        }
    }
});
export default LiveList;
